<template>
  <div class="app-container addProjectApp">
       <div class="type">
          <el-breadcrumb separator-class="el-icon-arrow-right">
                <!-- <el-breadcrumb-item :to="{path:'/entry',name:'entry',params:{courseId:courseId}, query:{anchor:anchor,type:1}}">课程建设</el-breadcrumb-item> -->
                <el-breadcrumb-item :to="{path:'/project/projectList'}" style="font-size: 16px;color: #262626;">项目管理</el-breadcrumb-item>
                <el-breadcrumb-item :to="{path:'/project/projectList'}" style="font-size: 12px;color: #777777 !important;line-height:52px">项目列表</el-breadcrumb-item>
                <el-breadcrumb-item style="font-size: 12px;color: #777777 !important;line-height:52px">{{projectName}}</el-breadcrumb-item>
            </el-breadcrumb>
       </div>
       <div class="header">
            <div class="detailTop clearfloat">
               <div class="imgTop">
                  <i class='icon' :class="[operStatus==0?'BeopenedStatus':operStatus==2?'stopStatus':operStatus==9?'closeStatus':'']">{{operStatus==1?'营业中':operStatus==2?'停业中':operStatus==9?'已关闭':'待开业'}}</i>
               </div>
              <h2 style="margin-left:100px;font-size: 18px;color: #262626;line-height: 32px;">{{projectName}}</h2>
              <el-select 
                popper-class='objOperStatus' 
                @change='operStatusChange'
                v-model="changeState" 
                placeholder="请选择">
                <el-option
                  :label="item.desc" 
                  v-for="(item,index) in projectState" 
                  :key="index" 
                  :value="item.code">
                </el-option>
              </el-select>
            </div>
            <div class="detailImgList">
              <!-- <el-scrollbar style="height:100%;"> -->
                <div class="imgListAll clearfloat" ref="imgListAll">
                 <div class="imgList imgListZhu">
                   <img :src="imgList2.fileUrl" @click="showImg(imgList2)"/>
                   <p  @click="showImg(imgList2)">项目主图</p>
                 </div>
                 <div class="imgList" v-for="(item,index) in imgList" :key=index>
                   <img :src="item.fileUrl" @click="showImg(item)"/>
                 </div>
                 
                </div>
              <!-- </el-scrollbar> -->
            </div>
           <div class="navList clearfloat">
              <h4 class="h5 clearfloat">
                 <img src="../../assets/img/xiangq.png" style="float:left;"/>
                 <span style="float:left;">项目地址</span>
               </h4>
               <div class="input">{{projectAddress}}</div>
               <p class="map" @click="lookMap">查看地图 ></p>
               <!-- <el-input v-model="projectName" placeholder="请填写项目名称，4~20个字，必填项"></el-input> -->
            </div>
            <div class="navList clearfloat">
                <h4 class="h5 clearfloat">
                 <img src="../../assets/img/xiangmu.png" style="float:left;"/>
                 <span style="float:left;">项目详情</span>
               </h4>
               <div class="textarea">{{projectDetail}}</div>
            </div>
            <div class="navList clearfloat">
                <h4 class="h5 clearfloat">
                 <img src="../../assets/img/lianxi.png" style="float:left;"/>
                 <span style="float:left;">联系电话</span>
               </h4>
               <div class="input">{{projectPhone}}</div>
              
            </div>
            <div class="navList clearfloat">
                <h4 class="h5 clearfloat">
                 <img src="../../assets/img/peizhi.png" style="float:left;"/>
                 <span style="float:left;">配套设置</span>
               </h4>
               <div class="checkDetail clearfloat">
                 <div class="checkListAll clearfloat">
                   <span>基础设施</span>
                   <el-checkbox-group v-model="checkListBase" class="checkList checkListNew" disabled>
                    <el-checkbox value="1" label="免费WiFi"></el-checkbox>
                    <el-checkbox value="2" label="行李寄存"></el-checkbox>
                    <el-checkbox value="3" label="免费停车场"></el-checkbox>
                    <el-checkbox value="4" label="收费停车场"></el-checkbox>
                    <el-checkbox value="5" label="24小时前台"></el-checkbox>
                  </el-checkbox-group>
                 </div>
                 <div class="checkListAll clearfloat">
                   <span>餐饮服务</span>
                   <el-checkbox-group v-model="checkListEat" class="checkList checkListNew" disabled>
                    <el-checkbox value="1" label="中餐厅"></el-checkbox>
                    <el-checkbox value="2" label="西餐厅"></el-checkbox>
                    <el-checkbox value="3" label="咖啡厅"></el-checkbox>
                    <el-checkbox value="4" label="送餐服务"></el-checkbox>
                  </el-checkbox-group>
                 </div>
                 <div class="checkListAll clearfloat">
                   <span>娱乐活动</span>
                   <el-checkbox-group v-model="checkListPlay" class="checkList checkListNew" disabled>
                    <el-checkbox value="1" label="茶室"></el-checkbox>
                    <el-checkbox value="2" label="棋牌室"></el-checkbox>
                    <el-checkbox value="3" label="乒乓球室"></el-checkbox>
                    <el-checkbox value="4" label="健身房"></el-checkbox>
                    <el-checkbox value="5" label="桌球室"></el-checkbox>
                  </el-checkbox-group>
                 </div>
               </div>
            </div>
       </div>
       <div class="disDiv" v-if="itemSrc!=''" @click="hideImg"></div>
       <div class="imgAll" v-if="itemSrc!=''" @click="hideImg">
         <img :src="itemSrc" />
       </div>
  </div>
</template>

<script>
import api from "../../fetch/url";
export default {
  data() {
    return {
       itemSrc:"",
       id:this.$route.params.id,
       projectName:"",
       projectAddress:"",
       projectDetail:"",
       projectPhone:"",
       checkListBase:["免费WiFi","行李寄存"],
       checkListEat:["咖啡厅","送餐服务"],
       checkListPlay:["茶室","乒乓球室"],
       imgList:[],
       imgList2:[],
       operStatus:"",
       projectState:[],
        changeState:'',
       loca:{
         name:null,
         location:{
           R:"",
           Q:"",
           lng:"",
           lat:""
         }
       },
    }
  },
  created() {
    api.enumsAll({},{
      headers: {
          'Content-Type': 'application/json;charset=UTF-8'
      }
    }).then(json => {
      if(json){
        this.basicFacility=json.basicFacility;
        this.recreation=json.recreation;
        this.catering=json.catering;
        this.projectState = this.projectState.concat(json.operStatus);
        api.projectIdDetail({},this.id,{
          headers: {
              'Content-Type': 'application/json;charset=UTF-8'
          }
        }).then(json => {
          if(json){
            this.imgList=json.othersPic;
            this.imgList2=json.homePic;
            this.operStatus=json.operStatus;
            this.changeState = json.operStatus;
            this.projectName=json.name;
            this.projectAddress=json.geoLocation.address;
            
            this.loca.name=this.projectAddress;
            this.loca.location.lat=json.geoLocation.latitude;
            this.loca.location.lng=json.geoLocation.longitude;
            this.projectDetail=json.detail;
            this.projectPhone=json.tel;
            if(json.basicFacility.length==0){
                this.checkListBase=json.basicFacility;
            }else {
                this.checkListBase=[];
                for(let i in this.basicFacility){
                  for(let j in json.basicFacility){
                      if(this.basicFacility[i].code==json.basicFacility[j]){
                          this.checkListBase.push(this.basicFacility[i].desc);
                      }
                  } 
                }
            }
            if(json.catering.length==0){
                this.checkListEat=json.catering;
            }else {
              this.checkListEat=[];
                for(let i in this.catering){
                  for(let j in json.catering){
                      if(this.catering[i].code==json.catering[j]){
                          this.checkListEat.push(this.catering[i].desc);
                      }
                  } 
                }
            }
            if(json.recreation.length==0){
                this.checkListPlay=json.recreation;
            }else {
              this.checkListPlay=[];
                for(let i in this.recreation){
                  for(let j in json.recreation){
                      if(this.recreation[i].code==json.recreation[j]){
                          this.checkListPlay.push(this.recreation[i].desc);
                      }
                  } 
                }
            }
          }

          this.$nextTick(()=>{
            this.init();
          });
        });
      }
    });
  },
  mounted() {
     
  },
  methods: {
    operStatusChange(){
       api.alterStatus({
         projectId:this.id,
         operStatus:this.changeState
       }).then(json=>{
         this.operStatus = this.changeState;
       })
    },
    hideImg(){
      this.itemSrc="";
    },
    showImg(item){
       this.itemSrc=item.fileUrl;
    },
     init(){
        this.$refs.imgListAll.style.width=this.imgList.length*210+210+"px";
     },
     lookMap(){
        this.$router.push({
          path:'/project/projectList/map',
          name:'map',
          params:{
              id:this.id,
          },
          query:{
              lat:this.loca.location.lat,
              lng:this.loca.location.lng,
              name:this.projectName
          }
      })
     },
  }
}
</script>
<style lang="scss">
.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
  background-color: #fff;
}

.textarea .el-textarea__inner{ 
  resize: none;
  height: 150px;
}

/* .detailImgList .el-scrollbar .el-scrollbar__wrap .el-scrollbar__view{
   white-space: nowrap;
} */
.checkListNew .el-checkbox{
   width:100px;
}
.app-container .el-form-item.is-success .el-input__inner:focus,.app-container .el-form-item.is-success .el-textarea__inner:focus,.app-container .el-input.is-active .el-input__inner,.app-container .el-input__inner:focus {
  border: 1px solid #FF6A00 !important;
  border-color:#FF6A00 !important;
      background-color: #fff !important;
    background: #fff !important;
}
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color:#FC612A !important;
  border-color:#FC612A !important;
}
.el-checkbox__input.is-checked+.el-checkbox__label,.el-textarea__inner:focus,.el-textarea__inner:focus {
  color:#FC612A !important;
}
.addProjectApp {
  .el-breadcrumb{
    hieght:52px;
    line-height:52px;
  }
}
</style>
<style lang="scss" scoped>
  .app-container {
    padding:16px 24px 35px;
  }
  .addProjectApp {
     .type {
         padding:0px 30px 10px 0px;border-bottom:1px solid #E5E7EB;height:52px;line-height:52px;
     }
  }
  .header {
       width: 100%;
       min-width:1100px;
      border-radius:4px;
      background: #fff;
      padding:10px 30px 10px 0;
      box-sizing: border-box;
      .detailTop {
        padding:10px 0 15px 0;
        height:57px;
        box-sizing: border-box;
        position: relative;
         .btn {
           float: left;
           width:60px;
           height:20px;
           text-align: center;
           line-height:20px;
           color: #fff;
           font-size: 12px;
           background: #ff66cc;
           margin-top:2px;
           margin-right:5px;
         }
         .h3 {
           float: left;
         }
      }
      .detailImgList {
        width: 1050px;
        height: 150px;
        overflow-x: auto;
        overflow-y: hidden;
        // margin-bottom:10px;
        .imgListAll {
          // width:5000px;
          height:140px;
        }
        .imgList {
          float: left;
          width:200px;
          height:140px;
          margin-right:10px;
          cursor: pointer;
          img {
            width:100%;
            height:100%;
          }
        }
        .imgListZhu {
          position: relative;
          p {
            width:100%;
            height:30px;
            position: absolute;
            bottom:0;
            left:0;
            z-index:3;
            text-align: center;
            line-height: 30px;
            background: rgba(0,0,0,0.5);
            color: #fff;
          }
        }
      }
      .navList {
          padding:5px 0 0 0;
          box-sizing: border-box;
          .h5,.input,.map {
            float: left;
          }
          .h5 {
            width:100px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            color: #262626;
            img {
              width:14px;
              margin-top:13px;
              margin-right:5px;
            }
            span {
              font-size: 14px;
              color: #262626;
            }
          }
          .input {
            height: 40px;
            line-height:40px;
            font-size: 14px;
            color: #777777;
          }
          .map {
            line-height:40px;
            margin-left:20px;
            cursor: pointer;
            font-size: 12px;
            color: #4A90E2;
          }
          .textarea {
            float: left;
            width:940px;
            padding-top:10px;
            line-height: 25px;
            font-size: 14px;
            color: #777777;
          }
          .uploadDetail {
            float: left;
             .upload {
               width:150px;
               height: 115px;
               border: 1px solid #DCDFE6;
               border-radius: 4px;
               text-align: center;
               line-height: 115px;
               color: #ccc;
               cursor: pointer;
             }
             p {
               margin-top:20px;
               color: #ccc;
               font-size:14px;
             }
          }
            .checkDetail {
            float: left;
            width:80%;
            background: #F7F7F9;
            border-radius: 2px;
            padding:8px 20px 20px;
            box-sizing: border-box;
            .checkListAll {
              margin-top:20px;
              span {
                float: left;
                font-size: 14px;
                color: #262626;
              }
              .checkList {
                float: left;
                margin-left:20px;
              }
            }
            .checkListAll:first-child{
                 margin-top:12px;
            }
          }
      }
  }
     .imgTop {
           position:relative;
           .icon{
             width: 84px;
             height: 32px;
             position:absolute;
             top:0;
             left:0;
             display:block;
             color: #53C32B;
             font-style: normal;
              background: rgba(83,195,43,.2);
              border-radius: 4px;
              font-size: 14px;
             font-weight: bold;
             padding-right: 10px;
             text-align: right;
             line-height: 32px;
             box-sizing: border-box;
             &::before{
               display: inline-block;
               content:'';
               width:14px;
               height: 14px;
               border-radius: 50% ;
               -webkit-border-radius: 50% ;
               -moz-border-radius: 50% ;
               -ms-border-radius: 50% ;
               -o-border-radius: 50% ;
               background: #53C32B;
               border: 2px solid #FFFFFF;
               position: absolute;
               left: 10px;
               top: 50%;
               transform: translateY(-50%);
               -webkit-transform: translateY(-50%);
               -moz-transform: translateY(-50%);
               -ms-transform: translateY(-50%);
               -o-transform: translateY(-50%);
              }
           }
           .closeStatus{
                   
            color:#484848;
             background: rgba(72,72,72,.2);
           }
           .closeStatus{
            
            &::before{
              background: #484848;
            }
             
           }
           .BeopenedStatus{
             color:#26A9FF;
             background: rgba(38,169,255,.2);
           }
           .BeopenedStatus{
            &::before{
              background: #26A9FF;
            }
             
           }
           .stopStatus{
             color:#FF7924;
             background: rgba(255,121,36,.2);
           }
           .stopStatus{
            &::before{
              background: #FF7924;
            }
            
           }
           img {
             display: block;
             width:100%; 
              height: 192px;
              object-fit: fill;
              background: #ccc;
           }
         }
  .disDiv {
          width:100%;
          height:100%;
          background: rgba(0,0,0,0.5);
          position: fixed;
          left:0;
          top:0;
          z-index:6;
          cursor: pointer;
        }
        .imgAll {
          position: fixed;
          left:50%;
          top:50%;
          -webkit-transform:translate(-50%,-50%);
			    transform:translate(-50%,-50%);
           z-index:8;
           cursor: pointer;
        }
 

</style>
<style lang="scss">
  .detailTop{
     .el-select{
      position: absolute;
      right: 0;
      top: 13px;
    }
    .el-select .el-input{
      width:84px;
    }
    .el-select .el-input.is-focus .el-input__inner{
      border: 1px solid #FC612A;
    }
    .el-select .el-input__inner:focus{
      border: 1px solid #FC612A;
    }
    .el-select .el-input .el-input__inner{
          height: 26px;
        line-height: 26px;
        padding: 0;
        padding-left: 8px;
        font-size: 14px;
        color: #262626;
    }
    .el-input__suffix{
        right: 2px;
        .el-input__icon{
          line-height: 26px;
          color: #777;
        }
      }
  }
</style>
